<template>
    <div>
        <div class="expressHead">
            <div class="expressGoodsPic">
                <!-- 商品图片 -->
                <!-- <img src="../../static/img/expressImg.png"/> -->
            </div>
            <div class="flexRight">
                <div>{{expName}}</div>
                <div>
                    <span class="expressOrder">运单号 {{number}} </span>
                    <van-button size="small" v-clipboard:copy="number" v-clipboard:success="onCopy">复制</van-button>
                </div>
            </div>
        </div>
        <!-- 收货地址 -->
        <div class="expressHead">
            <span class="iconAdress">收</span>
            <div style="font-size:14px;">
                【收货地址】{{deliSddr}}
            </div>
        </div>
        <!-- 物流步骤条 -->
        <van-steps direction="vertical" :active="0" active-color="#ff6700">
            <van-step v-for="(item, index) in expressList" v-bind:key="index">
                <h3>{{item.status}}</h3>
                <p>{{item.time}}</p>
            </van-step>
            <!-- <van-step>
                <h3>您的快件已从【奥克大厦韵达快递处】取出，即刻送往啥啥啥啥啥地方</h3>
                <p>2016-07-12 12:40</p>
            </van-step>
            <van-step>
                <h3>【城市】物流状态---请电联（<i class="callPhone">18688886666</i>）</h3>
                <p>2016-07-11 10:00</p>
            </van-step>
            <van-step>
                <h3>【城市】物流状态---请电联（<i class="callPhone">18688886666</i>）</h3>
                <p>2016-07-11 10:00</p>
            </van-step>
            <van-step>
                <h3>【城市】物流状态---请电联（<i class="callPhone">18688886666</i>）</h3>
                <p>2016-07-11 10:00</p>
            </van-step>
            <van-step>
                <h3>快件已发货</h3>
                <p>2016-07-10 09:30</p>
            </van-step> -->
        </van-steps>
    </div>
</template>

<script>
export default {
    name: 'expressList',
    data() {
        return {
            expName: '', // 物流公司名称
            number: '', // 运单号
            expressList: [], // 物流信息列表
            deliSddr: ''
        }
    },
    methods: {
        getKdi(){
            this.$http.post('/shop/express/front/kdi', {
                token: localStorage.getItem('token'),
                orderSn: this.orderSn
            }).then(res => {
                console.log(res)
                if (res.status === 0) {
                    console.log('---获取物流数据成功---')
                    var result = res.data.result
                    this.expName = result.expName
                    this.number = result.number
                    this.expressList = result.list
                    this.deliSddr = res.data.deliSddr
                } else {
                    this.$taost(res.message);
                }
            })
        },
        onCopy(e) {
            this.$toast('复制成功！');
        },
    },

    mounted() {
    },
    created() {
        if (this.$route.query.orderSn) {
            this.orderSn = this.$route.query.orderSn;
            this.getKdi()
        }
    }
}
</script>

<style lang="scss" scoped>
.expressHead{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-direction: row;
    background: #fff;
    padding: 15px;
    font-size: 16px;
    color: #333333;
    margin-bottom: 10px;

    .expressGoodsPic img{
        width: 65px;
        height: 65px;
        vertical-align: middle;
    }

    .flexRight{
        padding-left: 10px;

        .expressOrder{
            font-style: normal;
            color: #999999;
            font-size: 14px;
            margin-right: 10px;
        }
    }

    .iconAdress{
        display: block;
        border-radius: 50%;
        background: #cdcdcd;
        color: #fff;
        line-height: 1;
        padding: 10px;
        margin-right: 10px;
    }
}
/deep/ .van-step--vertical.van-step--process .van-icon-checked{
    border: 2px solid #ffba8c;
    border-radius: 50%;
    top: 10px;
    left: -24px;
    line-height: 1;
    font-size: 14px;
}
/deep/ .van-step--vertical .van-step__circle{
    top: 16px;
    left: -20px;
}
/deep/ .van-step--vertical{font-size: 12px;}
/deep/ .van-step .van-step__circle{
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #dddddd;
}
i.callPhone{color: #006bff; font-weight: bold;}
</style>
